<template>
  <div class="main">
    <!-- 顶部标题区域 -->
    <div class="header" v-if="activeIndex!=4">
      <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E7%BE%8E%E8%82%B2-web_1681200160959.png">
    </div>

    <!-- 导航区域 -->
    <div class="nav" v-if="activeIndex!=4">
      <a class="nav-item" :class="{active: activeIndex == 1}" @click="handleClick(1)">
        <img src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E8%AF%BE%E7%A8%8B_1667185214132.png" alt="艺术课程">
        <div class="channel-icon-title">艺术课程</div>
      </a>
      <a class="nav-item" :class="{active: activeIndex == 2}" @click="handleClick(2)">
        <img src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%8A%80%E8%83%BD_1667185222571.png" alt="艺术技能">
        <div class="channel-icon-title">艺术技能</div>
      </a>
      <a class="nav-item" :class="{active: activeIndex == 3}" @click="handleClick(3)">
        <img src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%B4%BB%E5%8A%A8_1667185230291.png" alt="艺术活动">
        <div class="channel-icon-title">艺术活动</div>
      </a>
    </div>

    <!--下面内容区域 -->
    <div v-if="activeIndex == 0">
      <div class="section">
        <div class="section-header">
          <img src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E8%AF%BE%E7%A8%8B_1667185214132.png" >
          <h2 class="section-title">艺术课程</h2>
          <a  class="more-link"  @click="handleClick(1)">更多 &gt;</a>
        </div>
        <div class="section-body">
          <a class="section-left" style="cursor: pointer;" @click="handleClick(1)">
            <img class="index-module_image_Qj8s+" src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E8%AF%BE%E7%A8%8B%E6%A9%B1%E7%AA%97%E5%B9%BF%E5%91%8A%E5%A4%A7%E5%9B%BE_1692250772933.png">
          </a>

          <div class="section-right">
            <a class="section-item" v-for="(item,index) in classList" :key="index" @click="jumpPlayer(item.id)">
              <img :src="item.image" alt="课程1" class="item-img" />
              <div class="item">
                <h3 class="item-title">
                  <span >{{item.title}}</span>
                </h3>
                <div class="item-text">{{item.description}}</div>
              </div>
            </a>

          </div>
        </div>
      </div>


      <div class="section">
        <div class="section-header">
          <img class="index-module_title-icon_5Wnj8" src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%8A%80%E8%83%BD_1667185222571.png">
          <h2 class="section-title">艺术技能</h2>
          <a  class="more-link" @click="handleClick(2)">更多 &gt;</a>
        </div>
        <div class="section-body">
          <a class="section-left" @click="handleClick(2)" style="cursor: pointer;">
            <img class="index-module_image_Qj8s+" src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%8A%80%E8%83%BD%E6%A9%B1%E7%AA%97%E5%B9%BF%E5%91%8A%E5%A4%A7%E5%9B%BE_1692250887178.png">
          </a>

          <div class="section-right">
            <a class="section-item" v-for="(item,index) in skillList" :key="index" @click="jumpPlayer(item.id)">
              <img :src="item.image" alt="课程1" class="item-img" />
              <div class="item">
                <h3 class="item-title">
                  <span >{{item.title}}</span>
                </h3>
                <div class="item-text">{{item.description}}</div>
              </div>
            </a>

          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <img class="index-module_image_Qj8s+" src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%B4%BB%E5%8A%A8_1667185230291.png">
          <h2 class="section-title">艺术活动</h2>
          <a  class="more-link" @click="handleClick(3)">更多 &gt;</a>
        </div>
        <div class="section-body">
          <a class="section-left" @click="handleClick(3)" style="cursor: pointer;">
            <img class="index-module_image_Qj8s+" src="https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%B4%BB%E5%8A%A8%E6%A9%B1%E7%AA%97%E5%B9%BF%E5%91%8A%E5%A4%A7%E5%9B%BE_1692251055332.png">
          </a>

          <div class="section-right">
            <a class="section-item" v-for="(item,index) in eventsList" :key="index" @click="jumpPlayer(1)">
              <img :src="item.image" alt="课程1" class="item-img" />
              <div class="item">
                <h3 class="item-title">
                  <span >{{item.title}}</span>
                </h3>
                <div class="item-text">{{item.description}}</div>
              </div>
            </a>

          </div>
        </div>
      </div>
    </div>

    <!--签栏内部内容-->
    <div class="card-container" v-if="activeIndex == 1">
      <div class="card" v-for="(item, index) in books_first" :key="index" @click="jumpPlayer(item.id)">
        <img :src="item.image" :alt="item.title" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-subtitle">{{ item.source }}</p>
        </div>
      </div>
    </div>

    <div class="card-container" v-if="activeIndex == 2">
      <div class="card" v-for="(item, index) in books_second" :key="index" @click="jumpPlayer(item.id)">
        <img :src="item.image" :alt="item.title" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-subtitle">{{ item.source }}</p>
        </div>
      </div>
    </div>

    <div class="card-container" v-if="activeIndex == 3">
      <div class="card" v-for="(item, index) in books_third" :key="index" @click="jumpPlayer(item.id)">
        <img :src="item.image" :alt="item.title" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-subtitle">{{ item.source }}</p>
        </div>
      </div>
    </div>

  </div>

  <player v-if="activeIndex==4" :show-nav-bar="false" resource-type="video" :resource-id="resourceId"></player>
</template>

<script>
import router from "@/router/index.ts";
import Player from "@/views/resource/Player.vue";

export default {
  components: {Player},
  data() {
    return {
      //控制标签的显示
      activeIndex: 0,
      // 艺术课程标签内容
      books_first: [
        { id:260, image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%BE%8E%E6%9C%AF%E4%B8%80%E4%B8%8A_1654616070929.jpg?x-eos-process=image/format,webp/resize,m_lfit,w_360", title: "比赛场上", source: "智慧中小学"},
        { id:261, image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%BE%8E%E6%9C%AF%E4%B8%80%E4%B8%8B_1654616044100.jpg?x-eos-process=image/format,webp/resize,m_lfit,w_360", title: "雕与刻的乐趣", source: "智慧中小学"},
        { id:262, image: "https://via.placeholder.com/500x300", title: "浮雕", source: "智慧中小学"},
        { id:263, image: "https://via.placeholder.com/500x300", title: "记录色彩", source: "智慧中小学"},
        { id:264, image: "https://via.placeholder.com/500x300", title: "今天我值日", source: "智慧中小学"},
        { id:265, image: "https://via.placeholder.com/500x300", title: "快乐丰收忙", source: "智慧中小学"},
        { id:266, image: "https://via.placeholder.com/500x300", title: "明暗与立体", source: "智慧中小学"},
        { id:267, image: "https://via.placeholder.com/500x300", title: "寻找美的踪迹", source: "智慧中小学"},
        { id:268, image: "https://via.placeholder.com/500x300", title: "永恒的动感.", source: "智慧中小学"},
        { id:269, image: "https://via.placeholder.com/500x300", title: "幽默的形象.", source: "智慧中小学"},
      ],
      // 艺术技能标签内容
      books_second: [
        { id:255, image: "https://via.placeholder.com/500x300", title: "合唱与训练", source: "智慧中小学" },
        { id:256, image: "https://via.placeholder.com/500x300", title: "节奏练习", source: "智慧中小学" },
        { id:257, image: "https://via.placeholder.com/500x300", title: "热身运动", source: "智慧中小学" },
        { id:258, image: "https://via.placeholder.com/500x300", title: "少儿合唱基础训练", source: "智慧中小学" },
        { id:259, image: "https://via.placeholder.com/500x300", title: "听觉练习", source: "智慧中小学" }
      ],
      // 艺术活动标签内容
      books_third: [
        { id:250, image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%BE%8E%E6%9C%AF%E4%B8%80%E4%B8%8A_1654616070929.jpg?x-eos-process=image/format,webp/resize,m_lfit,w_360", title: "《德沃夏克第八交响曲》", source: "智慧中小学"},
        { id:251, image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%BE%8E%E6%9C%AF%E4%B8%80%E4%B8%8B_1654616044100.jpg?x-eos-process=image/format,webp/resize,m_lfit,w_360", title: "《我心中的红》", source: "智慧中小学"},
        { id:252, image: "https://via.placeholder.com/500x300", title: "2021年艺术金奖 《回家》", source: "智慧中小学" },
        { id:253, image: "https://via.placeholder.com/500x300", title: "第七届艺术展演一等奖", source: "智慧中小学" },
        { id:254, image: "https://via.placeholder.com/500x300", title: "踢踏舞《捍卫之声》", source: "智慧中小学" },

      ],
      // 艺术课程
      classList: [
        {id:260,image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E5%B0%8F%E5%AD%A6%E5%9B%9B%E5%B9%B4%E7%BA%A7%E9%9F%B3%E4%B9%90%E4%B8%8A_1667204624751.png", title: "比赛场上",description: "比赛场上"},
        {id:261,image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E5%88%9D%E4%B8%AD%E5%85%AB%E5%B9%B4%E7%BA%A7%E7%BE%8E%E6%9C%AF%E4%B8%8B_1667204648367.png", title: "雕与刻的乐趣",description: "雕与刻的乐趣"},
        {id:262,image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E9%AB%98%E4%B8%AD%E9%9F%B3%E4%B9%90%E5%BF%85%E4%BF%AE1_1667204672050.png", title: "浮雕",description: "浮雕"}
      ],
      // 艺术技能
      skillList: [
        { id:255,image: "https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E4%B8%AD%E5%B0%8F%E5%AD%A6%E5%90%88%E5%94%B1%E5%9F%BA%E7%A1%80%E8%AE%AD%E7%BB%83_1667204872533.png", title: "合唱与训练",description: "合唱与训练"},
        { id:256,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/%E5%8F%A4%E4%BB%A3%E5%B7%A5%E7%AC%94%E4%BA%BA%E7%89%A9%E7%94%BB%E4%B8%B4%E6%91%B9_1667204851423.png", title: "节奏练习",description: "节奏练习"},
        { id:257,image: "https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%B4%A0%E8%B4%A8%E6%95%99%E8%82%B2%E8%88%9E%E8%B9%88%E8%AF%BE_1667204815549.png", title: "热身运动",description: "热身运动"}
      ],
      // 艺术活动
      eventsList: [
        { id:250,image: "https://s-file-1.ykt.cbern.com.cn/zxx/covers/c8fa416f-bb00-4180-b8d3-1ba893817ba5.jpg", title: "《德沃夏克第八交响曲》",description: "《德沃夏克第八交响曲》"},
        { id:251,image: "https://s-file-1.ykt.cbern.com.cn/zxx/covers/0dfc0f2f-0f99-49e5-a43f-3473b83df875.jpg", title: "《我心中的红》",description: "《我心中的红》"},
        { id:252,image: "https://s-file-1.ykt.cbern.com.cn/zxx/covers/7b2b2243-1d3b-4e35-b629-b02c49c8e452.jpg", title: "2021年艺术金奖 《回家》",description: "2021年艺术金奖 《回家》"}
      ],
      // 视频对应的id,用于控制播放视频组件的内容
      resourceId: 1,
    };
  },
  methods: {
    // 点击跳转不同标签
    handleClick(index) {
      this.activeIndex = index;
    },
    // 跳转视频页面并显示对应的视频
    jumpPlayer(resourceId) {
      this.activeIndex = 4;
      this.resourceId = resourceId;
    }
  },
  mounted() {
    this.activeIndex = 0;
  }
};
</script>

<style scoped>
.main{
  width: calc(100% - 48px);
  margin: 0 auto;
}
/* 顶部样式 */
.header {
  text-align: center;
  width: 100%;
  border-radius: 8px;
  margin: auto;
}
.header img{
  width: 100%;
}

.nav {
  margin: 10px 1px 0 1px;
  background: #f5f7fa;
  border: 1px solid #fff;
  display: flex;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
  z-index: 1;

}
.nav-item {
  transition: .3s;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #333;
  padding: 16px 12px;
  cursor: pointer;
}

.active {
  background: #fff;
}

/* Section 样式 */
.section-item {
  border-radius: 10px;
}
.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 18px 36px;
}
.section-title {
  flex: 1;
  margin: 0;
  line-height: 32px;
  font-size: 24px;
  color: #333;
  padding-left: 10px;
}
.more-link {
  color: #007bff;
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
}

.section-body {
  position: relative;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;
  z-index: 10;
  display: flex;
  flex-direction: row;
}
.section-left {
  width: 50%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px 0 hsla(0, 0%, 60%, .1);
}

.section-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.section-right {
  width: 50%;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.section-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 30%;
  width: 100%;
  cursor: pointer;
}
.item-img {
  min-width: 180px;
  max-width: 180px;
  border-radius: 8px;
  overflow: hidden;
}
.item{
  padding-left: 16px;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.item-title {
  margin-bottom: 14px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.item-text {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
}
.card-container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
}
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.card-content {
  padding: 8px 16px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card-subtitle {
  font-size: 14px;
  color: #888;
  margin: 4px 0 0;
}
</style>
